<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addRoomBuilding" ref="addApprovalCarRecordRef" :rules="addDromrules">
            <el-form-item label="宿舍楼" :label-width="formLabelWidth" prop="buildingId">
                <!-- <el-input v-model="addRoomBuilding.buildingId" autocomplete="off" placeholder="请填写宿舍楼id"></el-input> -->
                <el-select v-model="addRoomBuilding.buildingId" clearable placeholder="请选择宿舍楼" style="width: 100%">
                    <el-option v-for=" item  in  roomBuildingList " :key="item.id" :label="item.buildingName"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="宿舍楼名称" :label-width="formLabelWidth" prop="buildingName">
                <el-input v-model="addRoomBuilding.buildingName" autocomplete="off" placeholder="请填写宿舍楼名称"></el-input>
            </el-form-item> -->
            <el-form-item label="房间号" :label-width="formLabelWidth" prop="name">
                <el-input v-model="addRoomBuilding.name" autocomplete="off" placeholder="请填写房间号"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddApprovalCarRecord",
    components: { ElForm, ElMessage },
    data() {
        return {
            buildingName: ['1号男生宿舍', '1号女生宿舍', '2号宿舍', '3号宿舍'],
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            list: [],
            selectRoomBuilding: '',
            serachTeacher: [],
            roomBuildingList: [],
            addRoomBuilding: {
                id: '',
                name: '',
                buildingId: '',
                buildingName: '',
            },
            // 校验规则
            addDromrules: {
                // name: vxRule(true, null, "blur"),
                name: vxRule(true, "IntPlus", "blur"),
                buildingId: vxRule(true, null, "blur"),
                buildingName: vxRule(true, null, "blur"),
            },
        };
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        getRoomBuildingById(id) {
            httpService("/javaApi/baseRoomBuildingNo/queryById", { id: id }, "get").then(
                (data) => {
                    this.addRoomBuilding = data;
                }
            );
        },
        getDormList() {
            httpService(
                "/javaApi/baseRoomBuilding/list/0/100",
                {}, "get"
            ).then((data) => {
                console.log(2222222, data);
                this.roomBuildingList = data.list;
            });
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addRoomBuilding.id = ''
            this.addRoomBuilding.name = ''
            this.addRoomBuilding.buildingId = ''
            this.addRoomBuilding.buildingName = ''
            this.selectRoomBuilding = ''
        },
        save() {
            let teacher = this.roomBuildingList.filter(item => item.id == this.addRoomBuilding.buildingId)
            this.addRoomBuilding.buildingName = teacher[0].buildingName


            this.$refs.addApprovalCarRecordRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("name", this.addRoomBuilding.name);
                    params.append("buildingId", this.addRoomBuilding.buildingId);
                    params.append("buildingName", this.addRoomBuilding.buildingName);
                    if (this.title == '修改信息') {
                        params.append("id", this.addRoomBuilding.id);
                        httpService("/javaApi/baseRoomBuildingNo/edit", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success(data.object);
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getRoomBuildingList();
                                } else {
                                    ElMessage.error(data.object);
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/baseRoomBuildingNo/add", params, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success(data.object);
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getRoomBuildingList();
                                } else {
                                    ElMessage.error(data.object);
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>

<style>
.custom-header {
    .el-checkbox {
        display: flex;
        height: unset;
    }
}
</style>